<template>
  <div class="lineChartCom">
    <loading-state :echartShowStatus="echartShowStatus" class="chartMain">
      <div ref="chartDom" style="height: 300px; width: 550px" v-show="echartShowStatus === 2"></div>
    </loading-state>
  </div>
</template>

<script>
import { LineGraphOption } from '../LineOption'
import { mapState } from 'vuex'
import lodash from 'lodash'
import moment from 'moment'
import message from 'ant-design-vue/es/message'
export default {
  name: 'PlatformData',
  components: {},
  props: {
    otherOptions: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  computed: {
    //查询参数
    ...mapState({
      queryParams: (state) => state.statisticsPlatformData.queryParams,
      status: (state) => state.statisticsPlatformData.status,
    }),
  },
  watch: {},
  data() {
    return {
      chart: null,
      option: {},
      commonOptions: lodash.cloneDeep(LineGraphOption),
      getFunctionMap: {
        yhzz: 'getUserCountIncrease', //用户增长
        'OTAcl/tjs': 'getOTACount', //OTA车辆/台架数
        rws: 'increaseTaskCount', //任务数
        ptsysc: 'getUserOnlineTime', //平台使用时长
        OTArjzzs: 'getOTASoftwareCount', // OTA软件增长数
      },
      echartShowStatus: 3, // 1为加载中；2为显示图表；3为暂无数据
    }
  },
  mounted() {},
  methods: {
    getData() {
      this.echartShowStatus = 1
      if (this.status.lineStatus == 3) {
        return (this.echartShowStatus = 3)
      }
      const func = this.getFunctionMap[this.otherOptions.id]
      // console.log(func)
      let data = {
        from: this.queryParams.startTime,
        roleIds: [this.queryParams.roleType],
        to: moment(moment(this.queryParams.endTime).valueOf() + 24 * 60 * 60 * 1000).format('YYYY-MM-DD'),
      }
      console.log('data', data)
      this.$api[func](data).then((res) => {
        console.log(func, res)

        // 无数据时
        /* JSON.stringify(res.data) === '[]' ||
          JSON.stringify(res.data.countList) === '[]' ||
          JSON.stringify(res.data) === '{}'|| */
        if (
          !res.data ||
          JSON.stringify(res.data) === '[]' ||
          JSON.stringify(res.data) === '{}' ||
          JSON.stringify(res.data.countList) === '[]'
        ) {
          return (this.echartShowStatus = 3)
        }

        this.echartShowStatus = 2
        //横纵坐标数据清零
        this.commonOptions.series.forEach((item) => {
          item.data = []
        })
        this.commonOptions.xAxis.data = []
        //传入折线图配置项
        this.setOptionOfLine()

        if (func == 'getUserCountIncrease' || func == 'increaseTaskCount' || func == 'getOTASoftwareCount') {
          let totalNum = 0
          res.data.forEach((item) => {
            totalNum += parseInt(item.total)
            //纵坐标数据
            this.commonOptions.series[0].data.push(item.total)
            if (func == 'getUserCountIncrease') {
              this.commonOptions.series[1].data.push(totalNum)
            }

            //处理横坐标数据
            this.commonOptions.xAxis.data.push(moment(item.countDate).format('M-DD'))
          })
          //更新时间处理
          /*  let startDate = moment(res.data[0].countDate).format('YY-MM-DD')
            let endDate = moment(res.data[res.data.length - 1].countDate).format('YY-MM-DD') */
          let startDate = this.queryParams.startTime
          let endDate = this.queryParams.endTime
          this.commonOptions.title[0].subtext = startDate + '至' + endDate + ' ' + '更新于'
          //合计
          this.commonOptions.title[1].text = totalNum
        } else if (func == 'getOTACount') {
          console.log(res.data)
          if (!res.data.countList) {
            return (this.echartShowStatus = 3)
          }
          res.data.countList.forEach((item) => {
            this.commonOptions.series[0].data.push(item.count)
            this.commonOptions.xAxis.data.push(moment(item.keyName).format('M-DD'))
          })
          let startDate = moment(res.data.countList[0].keyName).format('YY-MM-DD')
          let endDate = moment(res.data.countList[res.data.countList.length - 1].keyName).format('YY-MM-DD')
          this.commonOptions.title[0].subtext = startDate + '至' + endDate + ' ' + '更新于'
          this.commonOptions.title[1].text = res.data.total
        } else if (func == 'getUserOnlineTime') {
          this.commonOptions.title[2].right = '86'
          let totalNum = 0
          res.data.forEach((item) => {
            totalNum += parseInt(item.total / 3600)
            this.commonOptions.series[0].data.push(item.total / 3600)
            this.commonOptions.xAxis.data.push(moment(item.countDate).format('M-DD'))
          })
          let startDate = moment(res.data[0].countDate).format('YY-MM-DD')
          let endDate = moment(res.data[res.data.length - 1].countDate).format('YY-MM-DD')
          this.commonOptions.title[0].subtext = startDate + '至' + endDate + ' ' + '更新于'
          this.commonOptions.title[1].text = totalNum
        }
        //图例的处理 legend.data
        this.commonOptions.legend.data = this.otherOptions.legendData
        this.otherOptions.legendData.forEach((item, index) => {
          this.commonOptions.series[index].name = item
        })
        //设置echarts折线图
        this.setEcharts()
      })
      /* .catch((err) => {
          //请求出错
          console.log(err)
          message.error('请求错误，请重试')
          this.echartShowStatus = 3
        }) */
    },
    //传入折线图固定配置项
    setOptionOfLine() {
      this.commonOptions.title[0].text = this.otherOptions.text1
      this.commonOptions.title[2].text = this.otherOptions.text3
      /*  this.commonOptions.legend.data = this.otherOptions.legendData
      this.commonOptions.series[0].name = this.otherOptions.series1Name */
      this.commonOptions.xAxis.name = this.otherOptions.xAxisName
      this.commonOptions.yAxis.name = this.otherOptions.yAxisName
      this.option = this.commonOptions
    },
    //设置echarts折线图
    setEcharts() {
      this.initChartBox()
      this.setOption()
    },
    initChartBox() {
      if (this.chart) {
        return
      }
      this.chart = this.$echarts.init(this.$refs.chartDom)
    },
    setOption() {
      if (!this.chart) {
        return
      }
      this.chart.setOption(this.option, true)
    },
  },
}
</script>
<style  lang="less" scoped>
.lineChartCom {
  .chartMain {
    width: 500px;
  }
}
</style>